import { Card, List, Avatar } from 'antd'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faUser } from '@fortawesome/free-solid-svg-icons'
import PropTypes from 'prop-types'
import './index.scss'

const RecentActivities = ({ activities }) => {
  return (
    <Card title="最近活动" extra={<a href="#more">查看更多</a>}>
      <List
        itemLayout="horizontal"
        dataSource={activities}
        renderItem={item => (
          <List.Item>
            <List.Item.Meta
              avatar={<Avatar icon={<FontAwesomeIcon icon={faUser} />} />}
              title={<span><strong>{item.user}</strong> {item.action}</span>}
              description={item.time}
            />
          </List.Item>
        )}
      />
    </Card>
  )
}

RecentActivities.propTypes = {
  activities: PropTypes.arrayOf(
    PropTypes.shape({
      id: PropTypes.number.isRequired,
      user: PropTypes.string.isRequired,
      action: PropTypes.string.isRequired,
      time: PropTypes.string.isRequired
    })
  ).isRequired
}

export default RecentActivities
